<template>
  <div class="app-container merchantBox">
    <el-button type="primary" class="addUser" @click="handAddJump">添加权限</el-button>

    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border>
      <el-table-column align="center" label="权限ID" width="90">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column label="权限名字" width="300" align="center">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" width="300">
        <template slot-scope="scope">
          <span>{{ scope.row.created_at}}</span>
        </template>
      </el-table-column>
      <el-table-column label="修改时间" align="center" width="300">
        <template slot-scope="scope">
         <span>{{ scope.row.updated_at}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="create_time" label="操作" width="250">
        <template slot-scope="scope">
          <div class="optionAll">
            <el-button size="mini" @click="handEditJump(scope.row.id)">编辑</el-button>
            <el-button size="mini" type="info" @click="handSubordinate(scope.row.id)">下级权限</el-button>
            <el-button size="mini" @click="deleteFn(scope.row.id)" type="danger">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      class="pageBox"
      background
      layout="prev, pager, next"
      :total="pageTotal"
      :page-size="20"
      v-if="pageShow"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  name: "Permission-user",
  components: {},
  data() {
    return {
      list: null,
      listLoading: false,
      pageTotal: 0,
      pageShow: false
    };
  },
  created() {},

  methods: {
    // 数据初始化
    defaultFn(currentPage,pid) {
      this.listLoading = true;
      this.$http
        .get("/web/user/permissions/list", {
			params: {
				token: localStorage.getItem("user_token"),
				pageSize: 20,
        page: currentPage,
        pid: pid
			}
        })
        .then(response => {
			if (response.status == 200) {
				this.list = response.data.data.list;
				this.pageTotal = response.data.data.pagination.total;
				if (this.pageTotal > 20) {
				this.pageShow = true;
				} else {
				this.pageShow = false;
				}

				this.listLoading = false;
			} else {
				this.listLoading = false;
			}
        })
        .catch(error => {
          //console.log(error);
        });
    },
    handAddJump(id) {
      	this.$router.push({ name: "permissionAdd" });
    },
    handEditJump(id) {
      	this.$router.push({ name: "permissionUpdate", query: { id: id } });
    },
    // 触发分页
    handleCurrentChange(val) {
      	this.defaultFn(val);
    },
    handSubordinate(pid){
        this.defaultFn(1,pid);
    },
    //删除
    deleteFn(id) {
      this.$confirm("确认删除?", "是否删除该账号?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$http
            .post("/web/user/delete", {
              token: localStorage.getItem("user_token"),
              id: id
            })
            .then(response => {
              if (response.data.status == "success") {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.defaultFn();
              }
            })
            .catch(error => {
              console.log("error:", error);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
  },

  mounted() {
    this.defaultFn();
  }
};
</script>

<style scoped lang='scss'>
.merchantBox {
  width: 1281px;
  margin: 40px;
  .addUser {
    margin-bottom: 20px;
  }
  .optionAll {
    display: flex;
    justify-content: space-between;
  }
}
.pageBox {
  text-align: center;
  margin-top: 30px;
}
</style>
